<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TicTacToe</title>
</head>

<body>
    <div id="board"></div>

</body>
<script>
    let pattern = [
        [2, 0, 0],
        [0, 1, 0],
        [0, 0, 0]
    ]

    let color = 1;

    function show() {
        let board = document.getElementById("board");
        board.innerHTML = "";

        for (let i = 0; i < 3; i++) {
            for (let j = 0; j < 3; j++) {
                let cell = document.createElement("div");
                cell.classList.add("cell");
                cell.innerText =
                    pattern[i][j] == 2 ? "❌" :
                    pattern[i][j] == 1 ? "⭕️" :
                    "";

                cell.addEventListener("click", () => move(j, i));

                board.appendChild(cell);
            }
            board.appendChild(document.createElement("br"));
        }
    }

    function move(x, y) {
        if (pattern[y][x] != 0) {
            return;
        }
        pattern[y][x] = color;
        if (check()) {
            alert(color == 2 ? "❌ is winner!" : "⭕️ is winner!")
        }
        color = 3 - color;
        show();
    }

    function check() {
        for (let i = 0; i < 3; i++) {
            let win = true;
            for (let j = 0; j < 3; j++) {
                if (pattern[i][j] != color) {
                    win = false;
                    break;
                }
            }
            if (win) {
                return true;
            }
        }

        //纵

        for (let i = 0; i < 3; i++) {
            let win = true;
            for (let j = 0; j < 3; j++) {
                if (pattern[j][i] != color) {
                    win = false;
                    break;
                }
            }
            if (win) {
                return true;
            }
        }

        //斜线
        {
            let win = true;
            for (let j = 0; j < 3; j++) {
                if (pattern[j][j] != color) {
                    win = false;
                    break;
                }
            }
            if (win) {
                return true;
            }
        }

        //反斜线
        {
            let win = true;
            for (let j = 0; j < 3; j++) {
                if (pattern[j][2 - j] != color) {
                    win = false;
                    break;
                }
            }
            if (win) {
                return true;
            }
        }

        return false;
    }

    show(pattern);
</script>
<style>
    #board {
        width: 350px;
    }
    
    .cell {
        width: 100px;
        height: 100px;
        background-color: green;
        display: inline-block;
        border: solid 1px white;
        vertical-align: middle;
        line-height: 100px;
        font-size: 50px;
        text-align: center;
    }
</style>

</html>